@import '~@/uni_modules/lime-style/index.scss';
/* #ifndef APP-ANDROID || APP-HARMONY || APP-IOS */
@supports(background: conic-gradient(#000, #fff)) {
	.check {
		height: 1rpx;
		position: absolute;
	}
}

$size: 6px;
$circle-trail-base-color: create-var(circle-trail-base-color, $gray-3);
$circle-trail-color: create-var(circle-trail-color, $circle-trail-base-color);
$circle-trail-cap-size: create-var(circle-trail-cap-size, $size);
// $circle-trail-cap-color: create-var(circle-trail-cap-color, currentColor);
$circle-stroke-base-color: create-var(circle-stroke-base-color, $primary-color);
$circle-stroke-color: create-var(circle-stroke-color, $circle-stroke-base-color);
$circle-stroke-cap-size: create-var(circle-stroke-cap-size, $size);
$circle-stroke-cap-start-color: create-var(circle-stroke-cap-start-color, $circle-stroke-color);
$circle-stroke-cap-end-color: create-var(circle-stroke-cap-end-color, $circle-stroke-color);

:root {
	display: inline-block;
	--l-circle-percent: 0%;
	--l-circle-percent2: 0;
}

.l-circle {
	--l-circle-percent: 0%;
	--l-circle-trail-base-color: #{$gray-3};
	--l-circle-stroke-base-color: #{$primary-color};
	// --l-circle-stroke-color: #{$primary-color};
	transition-property: --l-circle-percent2,--l-circle-percent;
	transition-duration: 300ms;
	
	position: relative;
	display: inline-flex;
	&__canvas {
		width: 100%;
		height: 100%;
	}
	&__inner{
		position: absolute;
		flex: 1;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		align-items: center;
		justify-content: center;
	}
	&__trail,&__stroke,&__stroke-line {
		position: absolute;
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}
	&__trail{
		background: var(--l-background);
	}
	&__stroke-line {
		z-index: 2;
		background: var(--l-background);
	}
}

.is-round {
	.l-circle {
		
		&__trail {
			--l-circle-percent: 100%;
			--l-circle-percent2: 1;
			.cap {
				position: absolute;
				display: block;
				width: 100%;
				height: 100%;
				background: radial-gradient(circle var(--l-circle-trail-cap-size) at 50% var(--l-circle-trail-cap-size), $circle-trail-color, $circle-trail-color var(--l-circle-trail-cap-size), transparent);
				transform: rotate(var(--l-circle-trail-cap-start));
				&.end {
					transform: rotate(var(--l-circle-trail-cap-end))
				}
			}
		}
		&__stroke .cap{
			position: absolute;
			display: block;
			width: 100%;
			height: 100%;
			transform: rotate(var(--l-circle-stroke-cap-start));
			&.start {
				background: radial-gradient(circle var(--l-circle-stroke-cap-size) at 50% var(--l-circle-stroke-cap-size), $circle-stroke-cap-start-color, $circle-stroke-cap-start-color var(--l-circle-stroke-cap-size), transparent);
			}
			&.end {
				transform: rotate(var(--l-circle-stroke-cap-end));
				background: radial-gradient(circle var(--l-circle-stroke-cap-size) at 50% var(--l-circle-stroke-cap-size), $circle-stroke-cap-end-color, $circle-stroke-cap-end-color var(--l-circle-stroke-cap-size), transparent);
				
				// color: var(--l-circle-stroke-cap-color-end, currentColor);
			}
		}
	}
}
.clockwise {
	transform: translateY(var(--l-circle-offset-top, 0)) scale(-1,1);
}
.clockwise .l-circle__inner{
	transform: scale(-1,1);
}
/*  #endif */

/* #ifdef APP-ANDROID || APP-HARMONY || APP-IOS */
.l-circle {
		// background-color: red;
		&__inner {
			flex: 1;
			align-items: center;
			justify-content: center;
			// background-color: aqua;
		}
	}

	.clockwise {
		transform: scale(-1, 1);
	}
/*  #endif */